<template>


  <div class="hotTopicItem" >
   
    <div class="topicItem">
      <img :src="pic">
      <p>{{ desc }}</p>
      <div class="info"> 
        <img :src="icon"/>
        <div class="right">
           <img src="../images/mainOne/gambit/icon_zuihuo_xinxing.png"/>
           <span>{{ num }}</span> 
        </div>
       
      </div>

    </div>
  </div>

</template>
<script>

import defaultPic from "../images/mainOne/gambit/IMG_zuihuo_02.png"
import defaultIcon from "../images/mainOne/gambit/icon_zuihuo_01.png"
export default {
  name :"hotTopicItem",
  //初始化数据
  props:{
    pic:{
      default:defaultPic
    },
    icon:{
      default:defaultIcon
    },
    desc:{
      default:"迪奥生活妆九色眼影，释放你的美！！"
    },
    num:{
      default:666
    }
  },
  data(){
      return{
         
      }
  }
}
</script>

<style lang='less' scoped>


    .hotTopicItem{
        .topicItem>img{
           
            width: 345/75rem;
              height: 268/75rem;

         
        }
        .topicItem{
          height: 350/75rem;
          width: 345/75rem;
          box-shadow: 0px 1px 20px #888888;
          
          p{
            font-size: 18/75rem;
            color: #888888;
            letter-spacing: 1px;
            text-indent: 10px;
          }
          .info{
            height: 30/75rem;
            padding: 3px/75rem 10/79rem;
            margin-top: 10/75rem;
            img:first-child{
              margin-top: 10/75rem;
              float: left;
              width: 20/75rem;
              height: 20/75rem;
              
            }
            .right{
             
              float: right;
              font-size: 18/75rem;
               color: #888888;
               line-height: 30/75rem;
               height: 30/75rem;
               img{
                 vertical-align: center;
                 width: 19/75rem;
                 height: 19/75rem;
                 float: left;
                 margin-top: 6/75rem;
               
               }
            }
          }
          
           
          
        }
        }
        .hotTopicItem{
          float: left;
          margin-left: 20/75rem;
          margin-top: 20/75rem;
         
        }
        

</style>

